<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
    <!-- 
        面试题：react、vue中的key有什么作用？(key的内部原理)
        1、虚拟DOM中key的作用：
        key是虚拟DOM的对象标识，当数据发生改变时，Vue会根据【新数据】生成【新的虚拟DOM】
        随后vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较 比较的规则如下：

        2、对比规则
        (1)、旧虚拟DOM中找到了与新虚拟DOM相同的key:
        若虚拟DOM中的内容没有改变，直接使用之前的真实的DOM
        若虚拟DOM中的内容发生了改变，则生成新的真实的DOM 随后替换掉页面之前真实的DOM

        (2)、旧虚拟DOM中未找到与新虚拟DOM相同的相同的key
        创建新的真实DOM 随后渲染到页面
         
        3、 使用index作为key可能会引发的问题
        若对数据进行：逆序添加、逆序删除等破坏顺序操作
        会产生没有必要的真实DOM更新 =>界面效果没有问题 但是效率低

        4、开发中应当如何选择key?
         最好使用每条数据唯一的标识符作为key 比如id 手机号 身份证号 学号等等
         如果不存在对数据的逆序添加 逆序删除等破坏操作 仅用于渲染列表用于展示 
         使用index作为可以是没有问题的

     -->
</head>

<body>
    <div id="root">
        <!-- 遍历数组 -->
        <ul>
            <button @click.once="add">添加一个老刘</button>

            <li v-for="(p,index) in  persons" :key="p.id">{{p.name}}--{{p.age}}
                <input type="text">
            </li>
        </ul>
    </div>
    <script>
        Vue.config.productionTip = false;

        new Vue({
            el: '#root',
            data: {
                persons: [{
                    id: '001',
                    name: '张三',
                    age: 18
                }, {
                    id: '002',
                    name: '李四',
                    age: 19
                }, {
                    id: '003',
                    name: '刘宇',
                    age: 20
                }],
                car: {
                    name: '奔驰',
                    price: 10000,
                    color: 'blue'
                },
                str: 'abcd'

            },
            methods: {
                add() {
                    const p = {
                        id: '004',
                        name: '老刘',
                        age: 21
                    }
                    this.persons.unshift(p)
                }
            }
        })
    </script>
</body>

</html>